<template>
  <view class="content">
    <u-navbar :border-bottom="false" back-icon-size="48" title="确认订单"></u-navbar>
    <view class="header">
      <view class="title">
        {{ travelInfo.title }}
      </view>
      <view class="date">
        {{ items.start_date }} 出发
      </view>
    </view>
    <view class="price-box">
      <u-row>
        <u-col span="12" class="p-title">商品金额</u-col>
      </u-row>
      <u-row class="p-box" v-for="(item,index) in pay_info" :key="index">
        <u-col span="6" class="p-u-title">{{ item.title }}</u-col>
        <u-col span="6" class="p-u-money" text-align="right">{{ item.price }}¥</u-col>
      </u-row>
    </view>
    <view class="pay-box">
      <view class="pay-b-radio">
        <u-radio-group style="width:100%">
          <view style="width:100%">
            <u-row v-for="(item,index) in pay_list" :key="index">
              <u-col span="10" class="pay-b-col">
                <view class="p-b-image">
                  <u-image :src="item.src" width="44rpx" height="44rpx"></u-image>
                </view>
                <view class="p-b-name">
                  {{ item.name }}
                  <text v-if="item.rname == 'lypay'" style="margin-left:20rpx">
                    (可用{{ travel_found }})
                  </text>
                  <text v-if="item.rname == 'qbpay'" style="margin-left:20rpx">
                    (可用{{ user_money }})
                  </text>
                </view>
              </u-col>
              <u-col span="2" text-align="right" v-if="item.rname === 'lypay'">
                <u-checkbox v-model="lySelect" shape="circle"  :disabled="travel_found > 0 ? false:true"></u-checkbox>
              </u-col>
              <u-col span="2" text-align="right" v-else-if="item.rname === 'qbpay'">
                <u-checkbox v-model="qbSelect" shape="circle" :disabled="user_money > 0 ? false:true"></u-checkbox>
              </u-col>
              <u-col  span="2" text-align="right" v-else>
                <u-radio v-model="pay_type" :name="item.rname" @change="selectPay" :disabled="total > 0 ? false:true"></u-radio>
              </u-col>
            </u-row>
          </view>
        </u-radio-group>
      </view>
    </view>
    <view class="pay-button" @click="do_pay">
      支付 ¥{{ total }}
    </view>
    <inputPwd v-if="show_password" @close="close" @enterPass="enterPass"></inputPwd>
  </view>
</template>
<script>
import myRequest from '@/api/index.js'
import oRequest from '@/api/order.js'
import inputPwd from '@/components/inputPwd'
export default {
  components:{
    inputPwd
  },
  name: "payment",
  data() {
    return {
      items     : {
        deduct_from           : "13,0,1",
        emergency_contact_name: "",
        emergency_contact_tel : "",
        fc_price              : 300,
        id                    : "12",
        is_shared_house       : "2",
        link_id               : "60",
        pay_cash              : 720,
        pay_welfare_fund      : 200,
        price                 : 620,
        start_date            : "2021-04-29",
        user_note             : "",
        vip_price             : 420,
        adultNum              : 1,
        childNum              : 0,
        childPrice            : 0,
        service_tips          : 0,
        travel_found_use      : 0,
        user_money_user:0,
        pay_pwd:''
      },
      user      : {},
      travelInfo: {},
      use_travel: 0,
      use_money: 0,
      pay_info  : [],
      is_relief : 0,
      pay_type  : '',
      pay_code  : '6004',
      payId     : 0,
      orderId   : 0,
      pay_list  : [
        {
          name   : '旅游基金',
          src    : '../../../../static/img/ly-icon.png',
          checked: false,
          rname  : 'lypay'
        },
        {
          name   : '钱包',
          src    : '../../../../static/img/qb-icon.png',
          checked: false,
          rname  : 'qbpay'
        },
        {
          name   : '微信',
          src    : '../../../../static/img/wxpay-icon.png',
          checked: false,
          rname  : 'wxpay'
        },
        {
          name   : '支付宝',
          src    : '../../../../static/img/ali-icon.png',
          checked: false,
          rname  : 'alipay'
        },
      ],
      lySelect:false,
      qbSelect:false,
      travel_found:0,
      user_money:0,
      show_password:false
    }
  },
  onLoad(options) {
    this.items      = this.$store.state.orderItem
    this.travelInfo = this.$store.state.travelInfo
  },
  onShow() {
    this.setPayInfo()
    this.getInfo()
    this.getVipUse()
  },
  methods : {
    // 获取福利金和旅游基金
    async getInfo() {
      let res = await myRequest.getUserInfo()
      if (res.status) {
        this.user = res.data
        this.travel_found = Number(this.user.travel_found)
        this.user_money = Number(this.user.user_money)
      }
    },
    async getVipUse() {
      let res = await oRequest.getVipUse()
      if (res.status) {
        this.is_relief = res.is_relief
      }
    },
    selectPay(e) {
      this.pay_type = e
      this.items.pay_cash = 0
      //this.items.travel_found_use = 0
      //this.use_travel = 0
      //this.use_money = 0
      switch (this.pay_type) {
        case 'lypay':
          if (this.user.travel_found < this.total) {
            uni.showToast({
                            title: '可用旅游基金不足',
                            icon : 'none'
                          })
            this.setPayInfo()
            return false
          }
          this.use_travel = this.total
          this.items.travel_found_use = this.use_travel
          this.items.pay_type = '1'
          this.items.pay_cash = this.use_travel
          break;
        case 'qbpay':
          if (this.user.user_money < this.total) {
            uni.showToast({
                            title: '钱包可用余额不足',
                            icon : 'none'
                          })
            this.setPayInfo()
            return false
          }
          this.use_money = this.total
          //this.items.travel_found_use = this.use_travel
          this.items.pay_cash = this.use_money
          this.items.pay_type = '2'
          break;
        case 'wxpay':
          this.items.pay_type = '3'
          this.items.pay_cash = this.total
          this.pay_code = '6004'
          break;
        case 'alipay':
          this.items.pay_type = '3'
          this.items.pay_cash = this.total
          this.pay_code = '6005'
          break;
      }
      this.$store.commit('changeOrderItem', this.items)
      this.setPayInfo()
    },
    do_pay() {
      if(this.items.user_money_fund !== undefined && this.items.user_money_fund > 0){
        //使用钱包余额进行确认
        const _this = this
        uni.showModal({
                        title:'温馨提示',
                        content:'当前订单将使用钱包余额 ￥'+_this.items.user_money_fund+' 进行抵扣',
                        //showCancel:false,
                        success:function(res){
                          if(res.confirm){
                            if(_this.total > 0 && _this.pay_type === ''){
                              uni.showToast({
                                              title: '请选择支付方式',
                                              icon : 'none'
                                            })
                              return false
                            }
                            _this.items.pay_type =_this.total > 0 ? '3' : '2'
                            _this.payMent()
                          }
                        }
                      })
      }else{
        if(this.total > 0 && this.pay_type === ''){
          uni.showToast({
                          title: '请选择支付方式',
                          icon : 'none'
                        })
          return false
        }
        this.items.pay_type = this.total > 0 ? '3' : '1'
        this.payMent()
      }

    },
    async payMent() {
      const items = this.items
      const total = this.total

      let res = await myRequest.addtripOrder({
                                               id                    : items.id,
                                               start_date            : items.start_date,
                                               link_id               : items.link_id,
                                               deduct_from           : items.deduct_from,
                                               emergency_contact_name: items.emergency_contact_name,
                                               emergency_contact_tel : items.emergency_contact_tel,
                                               user_note             : items.user_note,
                                               is_shared_house : items.is_shared_house,
                                               travel_found_use: items.travel_found_use,
                                               pay_welfare_fund: items.pay_welfare_fund,
                                               user_money_fund : items.user_money_fund !== undefined ? items.user_money_fund : 0,
                                               pay_cash        : total,
                                               pay_type        : items.pay_type,
                                               pay_password    : items.pay_pwd !== undefined ? items.pay_pwd : ''
                                               //bed_people_id: childId,
                                             })
      if (res.status) {
        uni.showToast({
                        title: '发团成功'
                      })
        this.$store.commit('changeChild', [])
        this.payId   = res.pay_id
        this.orderId = res.orderId
        if (this.payId == 0) {
          setTimeout(() => {
            uni.navigateTo({
                             url: '../../../mine/orderCenter/travel/travel'
                           })
          }, 2000)
        } else {
          uni.navigateTo({
                           url: '../../pay/pay?payCode=' + this.pay_code + '&payId=' + this.payId
                         })
        }
      }
    },
    setPayInfo() {

      // console.log(this.items)
      // console.log(this.travelInfo)
      this.pay_info = []
      if (this.items.adultNum > 0) {
        this.pay_info.push({
                             title: '成人',
                             price: this.items.price * this.items.adultNum
                           })
      }
      if (this.items.childNum > 0) {
        this.pay_info.push({
                             title: '儿童',
                             price: this.items.childPrice * this.items.childNum
                           })
      }
      if (this.items.is_shared_house === '2') {
        //不同意拼房，需付房费
        this.pay_info.push({
                             title: '房差',
                             price: this.items.fc_price
                           })
      }
      if (this.items.pay_welfare_fund > 0) {
        this.pay_info.push({
                             title: '福利金',
                             price: '-' + this.items.pay_welfare_fund
                           })
      }
      if (this.items.service_tips > 0) {
        this.pay_info.push({
                             title: '服务费',
                             price: this.items.service_tips
                           })
      }
      // if (this.is_relief === 1 && this.items.service_tips > 0) {
      //   const service = this.items.service_tips > 300 ? this.items.service_tips - 300 : 300 - this.items.service_tips
      //   this.pay_info.push({
      //                        title: 'VIP免服务费优惠',
      //                        price: service
      //                      })
      // }
      // if(this.use_travel > 0){
      //   this.pay_info.push({
      //                        title: '旅游基金',
      //                        price: '- '+this.use_travel
      //                      })
      // }
      // if(this.use_money > 0){
      //   this.pay_info.push({
      //                        title: '钱包支付',
      //                        price: '- '+this.use_money
      //                      })
      // }

    },
    enterPass(value){
      if(value === ''){
        uni.showToast({
          title:'请输入支付密码',
          icon:'none'
                      })
        return false
      }
      this.items.pay_pwd = value
      this.payMent()
    },
    close(){
      this.show_password = false
    }
  },
  watch   : {
    lySelect(val){
      if(this.total === 0){
        this.lySelect = false
      }
      if(val){
        if(this.travel_found > this.total){
          this.use_travel = this.total
        }else{
          this.use_travel = this.travel_found
        }
      }else{
        this.use_travel = 0
        if(this.use_money > 0){
          if(this.user_money - this.use_money > this.total){
            this.use_money += this.total
          }else{
            this.use_money += this.user_money - this.use_money
          }
        }
      }
      this.items.travel_found_use = this.use_travel
      //this.items.pay_cash = this.use_travel
      this.items.pay_type = '1'
      // if(this.total <= 0){
      //   this.pay_type = ''
      // }
      this.setPayInfo()
    },
    qbSelect(val){
      if(this.total === 0){
        this.qbSelect = false
      }
      if(val){
        if(this.user_money > this.total){
          this.use_money = this.total
        }else{
          this.use_money = this.user_money
        }
      }else{
        this.use_money = 0
        if(this.use_travel > 0){
          if(this.travel_found - this.use_travel > this.total){
            this.use_travel += this.total
          }else{
            this.use_travel += this.travel_found - this.use_travel
          }
        }
      }
      this.items.user_money_fund = this.use_money
      this.items.pay_type = '2'
      // if(this.total <= 0){
      //   this.pay_type = ''
      // }
      //this.items.pay_cash = this.use_money
      this.setPayInfo()
    },
  },
  computed: {
    total() {
      let service = Number(this.items.service_tips)
      if (this.is_relief === 1 && service > 0) {
        service = service > 300 ? service - 300 : 300 - service

      }
      let total = Number(this.items.price) * Number(this.items.adultNum) + Number(this.items.childPrice) * Number(this.items.childNum) + Number(this.items.fc_price) + service
      return total - Number(this.items.pay_welfare_fund) - this.use_travel - this.use_money
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  padding-bottom: 150rpx;

  .header {
    width: 100%;
    height: auto;
    background: #FFF;
    padding: 22rpx;
    font-family: PingFang SC;

    .title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      padding: 22rpx 0;
    }

    .date {
      padding: 0 0 0 20rpx;
      height: 44rpx;
      line-height: 44rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #333;
    }
  }

  .price-box {
    width: 710rpx;
    height: auto;
    background-color: #FFF;
    border-radius: 16rpx;
    margin: 20rpx auto 0;
    padding: 20rpx 12rpx;

    .p-title {
      height: 88rpx;
      line-height: 88rpx;
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: #333;
    }

    .p-box {
      padding: 16rpx 0;
      font-size: 28rpx;
      color: #333;

      .p-u-title {

      }

      .p-u-money {
        text-align: right;
      }
    }
  }

  .pay-box {
    width: 710rpx;
    height: auto;
    background-color: #FFF;
    border-radius: 16rpx;
    margin: 20rpx auto 0;
    padding: 20rpx 12rpx;

    .pay-b-radio {
      width: 100%;
    }

    .pay-b-col {
      height: 100rpx;
      justify-content: space-between;
      display: flex;

      .p-b-image {
        width: 44rpx;
        height: 44rpx;
        //display:inline-block;
      }

      .p-b-name {
        margin-left: 24rpx;
        width: auto;
        height: 44rpx;
        font-size: 32rpx;
        //line-height:44rpx;
        //display:inline-block;

      }
    }
  }

  .pay-button {
    width: 90%;
    height: 88rpx;
    font-size: 40rpx;
    background: linear-gradient(126deg, #F5B053 0%, #F8912C 100%);
    border-radius: 8rpx;
    margin: 100rpx auto 0;
    padding: 20rpx 12rpx;
    color: #FFF;
    text-align: center;
  }
  .pwd-content{
    padding:30rpx;
    width: 100%;
    height:100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    .confrim-btn{
      width:100%;
      .confrim-box{
        width:50%;
      }
    }
  }
}
</style>